<template>
	<!-- 优惠券 -->
	<view class="couponBox">
		<view class="acea-row row-around navCoupon" :class="navShow ? 'headerfixed' : ''"
			:style="{ top: statusBarHeight+44 + 'px' }">
			<template>
				<view v-for="(item,index) in navList" :key="index"
					:class="['acea-row', 'row-middle', type === item.type ? 'on' : '']">
					<text @click="setType(item.type)">{{item.name}}</text>
				</view>
			</template>
		</view>
		<view v-if="couponsList.length" class="coupon coupon-list">
			<view v-for="(item,index) in couponsList" :key="index" class="item">
				<!-- :class="{gary:item.isUse}" -->
				<view class="left main_bg">
					<view class="money">
						<text>￥{{ item.money }}</text>
						<view class="pic-num" v-if="parseFloat(item.minPrice)>0">
							满{{ item.minPrice?Number(item.minPrice):'' }}可用</view>
					</view>

				</view>
				<view class="right">
					<view class="name line2">
						<text>{{item.category===1?'商家券':'商品券'}}</text>

						{{ item.name }}
					</view>
					<view class="time-wrap" style="justify-content: space-between;">
						<block v-if="item.isFixedTime">
							<view class="time">
								{{ item.useStartTimeStr | dateFormat }}-{{ item.useEndTimeStr | dateFormat }}
							</view>
						</block>
						<block v-else>
							<view>{{'领取后'+ item.day+ '天内可用'}}</view>
						</block>
						<block v-if="item.isUse">
							<view class='getgray iconfont icon-yilingqu1'></view>
						</block>
						<block v-else>
							<view class="button" @click="receiveCoupon(item)">领取</view>
						</block>
					</view>
				</view>
			</view>
		</view>
		<view class='loadingicon acea-row row-center-wrapper'>
			<text class='loading iconfont icon-jiazai'
				:hidden='loadingcoupon==false'></text>{{couponsList.length?loadTitle:''}}
		</view>
		<emptyPage v-if="couponsList.length == 0 && !loadingcoupon" title="暂无可用优惠券~" mTop="14%" 
			:imgSrc="urlDomain+'crmebimage/presets/noCoupon.png'"></emptyPage>
	</view>
</template>

<script>
	import emptyPage from '@/components/emptyPage.vue'
	import {
		getCoupons,
		setCouponReceive,
	} from '@/api/api.js';
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	export default {
		components: {
			emptyPage
		},
		props: {
			merId: { // 商户id
				type: Number,
				default: 0
			}, 
		},
		data() {
			return {
				couponsList: [],
				navList: [{
						type: 1,
						name: '商家券',
						count: 0
					},
					{
						type: 2,
						name: '商品券',
						count: 0
					}
				],
				urlDomain: this.$Cache.get("imgHost"),
				loadendcoupon: false,
				loadingcoupon: false,
				page: 1,
				limit: 10,
				type: 1,
				statusBarHeight: 0,
				navShow: false,
				loadTitle: ''
			}
		},
		onShow() {
			// #ifdef MP || APP-PLUS
			this.statusBarHeight = statusBarHeight;
			// #endif
			// #ifdef H5
			this.statusBarHeight = 20;
			// #endif
		},
		mounted() {
			this.getCoupon()
		},
		methods: {
			// 领取优惠券
			receiveCoupon(item) {
				let that = this;
				if (that.isLogin === false) {
					toLogin();
				} else {
					uni.showLoading({
						title: '加载中...'
					});

					setCouponReceive(item.id).then(res => {
						uni.showToast({
							title: '领取成功',
							icon: 'none'
						})
						uni.hideLoading();
						item.isUse = !item.isUse
					}).catch(err => {
						uni.showToast({
							title: err,
							icon: 'none'
						})
						uni.hideLoading();
					})
				}
			},
			setType: function(type) {
				if (this.type !== type) {
					this.type = type;
					this.couponsList = [];
					this.page = 1;
					this.loadendcoupon = false;
					this.getCoupon();
				}
			},
			// 获取商铺优惠券
			getCoupon: function() {
				let that = this
				if (that.loadendcoupon) return false;
				if (that.loadingcoupon) return false;
				that.loadingcoupon = true;
				getCoupons({
					page: that.page,
					limit: that.limit,
					category: this.type,
					merId: this.merId
				}).then(res => {
					let list = res.data.list,
						loadend = list.length < that.limit;
					let couponsList = that.$util.SplitArray(list, that.couponsList);
					that.$set(that, 'couponsList', couponsList);
					that.loadendcoupon = loadend;
					that.loadTitle = loadend ? '我也是有底线的' : '显示更多';
					that.page = that.page + 1;
					that.loadingcoupon = false;
					that.isShow = true;
				}).catch(err => {
					that.loadingcoupon = false;
					that.loadTitle = '显示更多';
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.getgray {
		font-size: 134rpx !important;
		@include main_color(theme);
		position: absolute;
		right: -20rpx;
		bottom: -20rpx;
		opacity: .36;
	}
	.coupon-list {
		margin-top: 0;

		.right {
			position: relative;
			overflow: hidden;
		}
	}

	.couponBox {
		/deep/.empty-box {
			padding-top: 200rpx;
			margin-top: 0 !important;
		}
	}

	.navCoupon {
		width: 100%;
		height: 80rpx;
		color: #999999;
		background-color: #fff;
	}

	.navCoupon .acea-row {
		border-top: 5rpx solid transparent;
		border-bottom: 5rpx solid transparent;
		cursor: pointer;
	}

	.navCoupon .acea-row.on {
		@include tab_border_bottom(theme);
		@include main_color(theme);
	}

	.coupon {
		padding: 24rpx;
		background-color: #F5F5F5;

		.item {
			display: flex;
			margin-bottom: 16rpx;

			.left {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 240rpx;
				font-weight: 500;
				font-size: 24rpx;
				line-height: 1;
				color: #FFFFFF;

				&.gary {
					background-image: url('');
				}

				.money {
					text {
						margin-left: 10rpx;
						font-size: 60rpx;
					}

				}
			}

			.right {
				flex: 1;
				min-width: 0;
				padding: 0 20rpx;
				background-color: #FFFFFF;

				.name {
					border-bottom: 1rpx solid #F0F0F0;
					font-weight: 500;
					height: 115rpx;
					font-size: 30;
					line-height: 46rpx;
					color: #282828;
					padding: 15rpx 0;

					text {
						display: inline-block;
						// width: 84rpx;
						// height: 28rpx;
						padding: 0 10rpx;
						border-radius: 14rpx;
						margin-right: 15rpx;
						background-color: #FFF4F3;
						font-weight: 500;
						font-size: 20rpx;
						line-height: 26rpx;
						text-align: center;
						@include main_color(theme);
						@include coupons_border_color(theme);

						&.gary {
							border-color: #BBB;
							color: #bbb;
							background-color: #F5F5F5;
						}
					}
				}

				.time-wrap {
					display: flex;
					align-items: center;
					padding-top: 16rpx;
					padding-bottom: 16rpx;
					font-weight: 500;
					font-size: 20rpx;
					color: #999999;

					.time {
						flex: 1;
						min-width: 0;
					}

					.button {
						width: 136rpx;
						height: 44rpx;
						border-radius: 22rpx;
						@include main_bg_color(theme);
						font-weight: 500;
						font-size: 22rpx;
						line-height: 44rpx;
						text-align: center;
						color: #FFFFFF;

						&.gary {
							background-color: #999;
						}
					}
				}
			}
		}

		.disabled {
			.left {
				background-image: url(../../static/images/coupon2.png);
			}

			.right {
				.name {
					text {
						border-color: #C1C1C1;
						color: #C1C1C1;
					}
				}

				.time-wrap {
					.button {
						background-color: #CCCCCC;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>